<template>
  <div class="system-info">
    <el-card v-loading="loading">
      <div class="tab-header">
        <span>系统基本信息</span>
        <el-icon class="refresh-icon" @click="refresh">
          <Refresh />
        </el-icon>
      </div>
      <el-descriptions :column="1" border>
        <el-descriptions-item label="操作系统版本">
          {{ info?.os_version }}
        </el-descriptions-item>
        <el-descriptions-item label="系统构建版本">
          {{ info?.os_build }}
        </el-descriptions-item>
        <el-descriptions-item label="系统启动时间">
          {{ formatTime(info?.boot_time) }}
        </el-descriptions-item>
        <el-descriptions-item label="注册用户">
          {{ info?.registered_user }}
        </el-descriptions-item>
        <el-descriptions-item label="序列号">
          {{ info?.serial_number }}
        </el-descriptions-item>
        <el-descriptions-item label="制造商">
          {{ info?.manufacturer }}
        </el-descriptions-item>
        <el-descriptions-item label="组织">
          {{ info?.organization }}
        </el-descriptions-item>
        <el-descriptions-item label="安装日期">
          {{ formatTime(info?.install_date) }}
        </el-descriptions-item>
        <el-descriptions-item label="本地时间">
          {{ formatTime(info?.local_time) }}
        </el-descriptions-item>
        <el-descriptions-item label="进程数量">
          {{ info?.process_count }}
        </el-descriptions-item>
        <el-descriptions-item label="用户数量">
          {{ info?.user_count }}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>

    <!-- 内存使用情况 -->
    <div class="section-title">内存使用情况</div>
    <el-card v-loading="loading">
      <div class="tab-header">
        <span>内存使用情况</span>
        <el-icon class="refresh-icon" @click="refresh">
          <Refresh />
        </el-icon>
      </div>
      <el-descriptions :column="1" border>
        <el-descriptions-item label="物理内存">
          <div class="memory-info">
            <span>总内存: {{ formatSize(info?.memory_usage?.total) }}</span>
            <span>已用: {{ formatSize(info?.memory_usage?.used) }}</span>
            <span>可用: {{ formatSize(info?.memory_usage?.free) }}</span>
            <el-progress :percentage="parseFloat(info?.memory_usage?.usage)" :format="percentageFormat" />
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="虚拟内存">
          <div class="memory-info">
            <span>总内存: {{ formatSize(info?.virtual_memory_usage?.total) }}</span>
            <span>已用: {{ formatSize(info?.virtual_memory_usage?.used) }}</span>
            <span>可用: {{ formatSize(info?.virtual_memory_usage?.free) }}</span>
            <el-progress :percentage="parseFloat(info?.virtual_memory_usage?.usage)" :format="percentageFormat" />
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Refresh } from '@element-plus/icons-vue'
import { getSystemInfo } from '/@/api/monitor'
import { formatTime, formatSize } from '../utils/format'
import { SystemInfo } from '../types'

const info = ref<SystemInfo>({} as SystemInfo)
const loading = ref(false)
const percentageFormat = (percentage: number): string => `${percentage}%`

const refresh = async () => {
  try {
    loading.value = true
    const { data } = await getSystemInfo()
    info.value = data.system
  } finally {
    loading.value = false
  }
}

// 初始加载
refresh()

defineExpose({
  refresh
})
</script>

<style lang="scss" scoped>
@import '../styles/common.scss';

.system-info {
  .memory-info {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;

    span {
      min-width: 150px;
      white-space: nowrap;
    }
  }

  .section-title {
    font-size: 16px;
    font-weight: bold;
    margin: 20px 0 16px;
    padding-left: 8px;
    border-left: 4px solid var(--el-color-primary);
  }
}
</style> 